<head>
    <link href="${ctx}/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/css/index.css" rel="stylesheet">
    <link href="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">
    <script src="${ctx}/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="${ctx}/js/extends.js"></script>
    <script src="${ctx}/layui/layui.all.js"></script>
    <script src="${ctx}/js/util.js"></script>
    <link href="${ctx}/layui/css/layui.css" rel="stylesheet">
    <link href="${ctx}/layui/css/layui.css" rel="stylesheet">
    <#--<link href="${ctx}/css/sendmsg.css"></script>-->
    <script src="${ctx}/js/vue.min.js"></script>
    <style>

        li {
            display: inline;
            line-height: 24px;
            height: auto;
            word-break: break-all;
            word-wrap: break-word;
        }


        .btn {
            font-size: 12px;
        }

        .layui-form-checkbox[lay-skin=primary] i {
            top: 5px;
        }

        .line_box {
            padding: 30px 0 0 50px;
        }

        .line_box li {
            display: table;
            width: 580px;
            padding: 20px;
            margin-bottom: 20px;
            box-sizing: border-box;
            border: 1px dashed #bbb;
            /*box-shadow:2px 2px 4px #bbb;*/
            cursor: pointer;
        }

        .line_box .choose_line {
            border: 2px solid #2196f3;
        }

    </style>
    <title>消息推送中心</title>
</head>
<body>

<div id="app">
    <form class="layui-form">
        <ul class="line_box">
            <li @click="changeType(1)" :class="{'choose_line':request.type===1}">

                <label class="layui-form-label" style="width: auto">活跃区间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="star" placeholder="请选择时间">
                </div>
                -
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="end" placeholder="请选择时间">
                </div>

            </li>

            <li @click="changeType(2)" :class="{'choose_line':request.type===2}">

                <label class="layui-form-label" style="width:auto">余额区间(单位:分)</label>
                <div style="width: 180px;float: left;">
                    <input type="number" name="params" min="0"
                           placeholder="输入余额"
                           autocomplete="off" class="layui-input" v-model="request.starMoney">
                </div>
                <div style="float: left;margin: 0 3px">~</div>
                <div style="width: 180px;float: left;">
                    <input type="number" name="params"
                           placeholder="输入余额"
                           autocomplete="off" class="layui-input" max="1000" v-model="request.endMoney">
                </div>

            </li>

            <li @click="changeType(3)" :class="{'choose_line':request.type===3}">

                <label class="layui-form-label" style="width: auto">指定手机号码</label>
                <div style="width: 250px;float: left;">
                    <input type="number" name="params"
                           placeholder="输入手机号码"
                           autocomplete="off" class="layui-input" v-model="request.phone">
                </div>


            </li>

            <li @click="changeType(4)" :class="{'choose_line':request.type===4}">
                <label class="layui-form-label" style="width:auto">选择渠道</label>
                <div style="width: 250px;display: inline-block;">
                    <select name="type" id="brand" lay-verify="">
                        <option value="">渠道选择</option>
                        <option value="vivo">vivo</option>
                        <option value="oppo">oppo</option>
                        <option value="huawei">huawei</option>
                        <option value="meizu">meizu</option>
                    </select>
                </div>
            </li>

            <li @click="changeType(5)" :class="{'choose_line':request.type===5}">
                <div class="layui-btn layui-btn-normal" @click="openTask" style="float: left;margin-left:20px">
                    <i class="layui-icon">&#xe608;</i> 选择任务
                </div>
                <#--<div style="width: 150px;display: inline-block;">-->
                <#--<select name="type" id="type" lay-verify="" v-model="taskId">-->
                <#--<option value="">任务类型选择</option>-->
                <#--<option value="Common">通用任务</option>-->
                <#--<option value="Soso">搜搜任务</option>-->
                <#--<option value="Comments">评论任务</option>-->
                <#--</select>-->
                <#--</div>-->
                <div style="width: 200px;float: left;margin-left: 15px">
                    <input type="text" name="params"
                           placeholder="任务名称"
                           autocomplete="off" class="layui-input" max="1000" v-model="request.taskName" readonly>
                </div>

                <div style="width: 120px;float: left;margin-left: 15px;display: none">
                    <input type="text" name="params"
                           placeholder="任务id"
                           autocomplete="off" class="layui-input" max="1000" v-model="request.taskId" readonly>
                </div>
            </li>
        </ul>


    </form>
    <div style="display: table;margin-bottom: 20px;padding-left: 40px">
        <label class="layui-form-label" style="width:auto">消息标题</label>
        <div class="layui-input-block" style="width: 180px;float: left;margin-left: 0;">
            <input type="text" name="params"
                   placeholder="输入标题"
                   autocomplete="off" class="layui-input" max="1000" v-model="request.title">
        </div>

    </div>
    <div style="display: table;margin-bottom: 20px;padding-left: 40px;width: 640px">

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="width:auto">消息内容</label>
            <div class="layui-input-block">
                <textarea name="desc" v-model="request.msg" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
    </div>
    <div style="width: 100%;display: table;margin-bottom: 20px;padding-left: 40px ">
        <button class="layui-btn layui-btn-normal" @click="sendMsg" style="float: left;margin-left:20px">
            <i class="layui-icon">&#xe609;</i> 推送
        </button>
        <button class="layui-btn layui-btn-normal" @click="getCount" style="float: left;margin-left:20px">
            <i class="layui-icon">&#xe617;</i> 计算推送个数
        </button>

        <button class="layui-btn layui-btn-disabled" style="float: left;margin-left:20px">
            {{request.count}}个
        </button>
    </div>
</div>
</body>


<!--请在下方写此页面业务相关的脚本-->


<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            request: {
                count: 11111110,
                type: 4,
                starTime: '',
                endTime: '',
                starMoney: 0,
                endMoney: 0,
                taskId: '',
                taskName: '',
                category: '',
                brand: '',
                phone: '',
                title: '',
                msg: ''
            }
        },
        created: function () {

        },
        mounted: function () {

        },
        methods: {
            changeType: function (i) {
                this.request.type = i;
                console.log(this.request.type);
            },
            getCount: function () {
                this.request.starTime = $('#star').val();
                this.request.endTime = $('#end').val();
                this.request.brand = $('#brand').val();
                var res = this.ajax('/member/count', this.request, 'post');
                this.showMsg(res);
                if (res.success) {
                    this.request.count = res.data;
                }
            },
            openTask: function () {
                layer_show("选择任务", "/member/records/list", "800", "600");
            },
            bindTask: function (taskId, taskName) {
                this.request.taskId = taskId;
                this.request.taskName = taskName;
            },
            sendMsg: function () {
                this.request.starTime = $('#star').val();
                this.request.endTime = $('#end').val();
                this.request.brand = $('#brand').val();
                var res = this.ajax('/member/send', this.request, 'post');
                this.showMsg(res);

            },
            ajax: function (url, data, type) {
                var i;
                $.ajax({
                    url: url,
                    type: type,
                    async: false,
                    data: data,
                    dataType: "json",
                    success: function (res) {
                        i = res;

                    },
                    error: function () {
                    }
                });
                return i;

            },
            showMsg: function (res) {
                var that = this;
                if (res.success) {
                    layer.msg(res.message)
                } else {
                    layer.msg(res.message)
                }
            }
        }
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#star'
            , type: 'datetime'

        });
        laydate.render({
            elem: '#end'
            , type: 'datetime'

        });
    });
    $(document).ready(function () {
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });
    });


</script>
<!--/请在上方写此页面业务相关的脚本-->
